// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;

#form-group-roles .form-field {
  width: inherit;
}

#reviewing-role-form {
  margin-top: 0;
}

.abstract-role-widget {
  padding-right: 20px;
  max-height: 700px;
  width: 800px;
  overflow-y: auto;
}

.abstract-role-list {
  margin: 0;
  padding-left: 0;

  li.i-box {
    margin: 20px 0;
    display: block;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .user-role-list {
    padding-left: 0;

    .event-user {
      margin-top: 0.1em;

      .icon-cross {
        vertical-align: middle;
        font-size: 0.8em;
        margin-left: 0.5em;
      }
    }
  }

  .actions {
    overflow: auto;
  }

  .role-description {
    margin: 1em 0 0.5em 0;
    overflow: auto;

    .title {
      font-size: 1.2em;
    }

    .add-user {
      padding: 0;
      height: 1.8em !important;
    }
  }

  .reviewer-container {
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;

    &:not(:first-child) {
      @include border-top();
    }

    &:not(:last-child) {
      padding-bottom: 1em;
    }
  }
}

.event-roles {
  .list-filter {
    padding: 0;

    li {
      padding: 0.1em 0.7em;
      -moz-padding-end: 2rem;

      & > ::before {
        cursor: pointer;
      }

      &.separator {
        cursor: default;
      }

      &:not(.enabled):not(.separator) {
        background-color: inherit !important;
      }

      input[type='checkbox'] {
        display: none;

        &:not(:checked) + .icon-checkmark {
          visibility: hidden;
        }
      }

      .icon-checkmark {
        color: $black;
        padding-right: 0.5em;
      }

      .icon-stop.no-account {
        color: $yellow;
      }

      .icon-stop.no-registration {
        color: $orange;
      }

      .icon-stop.no-builtin-roles {
        color: $red;
      }

      span.titled-rule {
        width: 100%;
      }
    }
  }

  #event-participants-list {
    .registration-column {
      padding-top: 0.9em;

      .icon-ticket {
        color: $pastel-gray;

        &.exists {
          color: $blue;
        }
      }
    }

    .roles-column {
      & > span {
        color: $light-gray;
        margin: 0.4em;

        .badge {
          background-color: $light-gray;
        }
      }

      & > span:not(.custom) {
        border-color: $pastel-gray !important;
      }
    }

    .edit-column {
      .i-link.disabled {
        color: $pastel-gray;
      }
    }
  }
}
